<style>
</style>

<template>
  <div class="search-form-con">
    <Row type="flex" justify="space-between" style="margin-bottom: 24px;">
      <Col :span="12">
        <Button icon="plus" type="primary" @click="addUserModal.show = true">添加用户</Button>
      </Col>
      <Col :span="12">
        <Row type="flex" justify="end">
          <!-- 搜索 -->
          <!--<Form ref="searchForm" :model="form" autocomplete="on" inline>-->
          <!--<FormItem>-->
          <!--<Input v-model="form.username" placeholder="用户名"/>-->
          <!--</FormItem>-->
          <!--<FormItem>-->
          <!--<Input v-model="form.phoneNumber" placeholder="联系电话"/>-->
          <!--</FormItem>-->
          <!--<FormItem>-->
          <!--<DatePicker type="daterange" placeholder="请选择添加时间范围" v-model="form.date"></DatePicker>-->
          <!--</FormItem>-->
          <!--<FormItem>-->
          <!--<Button icon="search" @click="handleSearch(form)">搜索</Button>-->
          <!--</FormItem>-->
          <!--</Form>-->
        </Row>
      </Col>
    </Row>


    <!-- 添加用户 -->
    <Modal v-model="addUserModal.show" width="400">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>添加用户</span>
      </p>

      <div>
        <Form :model="addUserModal.form" label-position="top">
          <FormItem label="用户名">
            <Input v-model="addUserModal.form.username"/>
          </FormItem>
          <FormItem label="登录密码">
            <Input type="password" v-model="addUserModal.form.password"/>
          </FormItem>
          <FormItem label="联系电话">
            <Input v-model="addUserModal.form.phoneNumber"/>
          </FormItem>
          <FormItem label="关联角色">
            <Select v-model="addUserModal.form.roles" multiple>
              <Option :value="role.id" v-for="role in roleList" :key="role.id">{{role.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="备注">
            <Input type="textarea" v-model="addUserModal.form.remark"/>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="addUserModal.loading" @click="handleAddUser(addUserModal.form)" long>
          <span v-if="!addUserModal.loading">添加用户</span>
          <span v-else>请求提交中</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: 'UserViewHeadTool',
    data() {
      return {
        form: {
          username: '',
          phoneNumber: '',
          createdDate: null
        },

        // 添加用户模态框
        addUserModal: {
          show: false,
          form: {
            username: '',
            password: '',
            phoneNumber: '',
            remark: '',
            roles: []
          },
          loading: false
        }
      }
    },
    computed: {
      ...mapState('system', {
        roleList: state => state.user.role.roleList
      })
    },
    methods: {
      handleSearch(form) {
        this.$Message.info('该功能尚未开发');
      },

      // 添加用户
      handleAddUser(form) {
        this.addUserModal.loading = true;
        this.$emit('on-add-user', form, (status) => {
          if (status) {
            this.addUserModal.show = false
            Object.assign(this.$data.addUserModal.form, this.$options.data().addUserModal.form)
          }
          this.addUserModal.loading = false;
        });

      }
    }
  }
</script>
